//@ts-nocheck
import React, { useState }  from 'react';
import { AgGridReact } from '@ag-grid-community/react';
import '@ag-grid-community/core/dist/styles/ag-grid.css'
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css'

import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'

class MedalCellRenderer extends React.Component {
  render() {
    return (
      <span>
        {this.props.value}
      </span>
    );
  }
}

const maxColumns = 1000;
var columns = [];

var colsCount = maxColumns;

while(colsCount--) {
  columns.push({
    field: `col${colsCount}`,
    cellRenderer: MedalCellRenderer,
    filter: true
  })
}

columns[0].pinned = "left"

const generateData = () => {
  let data = [];
  for (let i = 0; i < 500; i++) {
    colsCount = maxColumns;
    let row = {}
    while (colsCount--) {
      row[`col${colsCount}`] = `col${colsCount}` + i;
    }
    data.push(row);
  }
  return data;
};

const App = () => {
   const [rowData] = useState([
       {make: "Toyota", model: "Celica", price: 35000},
       {make: "Ford", model: "Mondeo", price: 32000},
       {make: "Porsche", model: "Boxster", price: 72000}
   ]);
   
   const [columnDefs] = useState(columns)

   return (
       <div className="ag-theme-alpine" style={{height: "100vh", width: "100%"}}>
           <AgGridReact
              skipHeaderOnAutoSize={true}
              modules={[ClientSideRowModelModule]}
              rowData={generateData()}
              columnDefs={columnDefs}>
           </AgGridReact>
       </div>
   );
};

export default App




